<template>
  <div class="audio-test-panel bg-card rounded-lg p-6 border border-border">
    <h3 class="text-lg font-semibold text-foreground mb-4 flex items-center">
      <i class="i-mdi-music mr-2 w-5 h-5" />
      音效测试
    </h3>

    <div class="space-y-4">
      <!-- 音效模式切换 -->
      <div class="flex items-center justify-between">
        <div>
          <label class="text-sm font-medium text-foreground">音效模式</label>
          <p class="text-xs text-muted-foreground">选择使用预生成音效或程序生成音效</p>
        </div>
        <select
          v-model="soundMode"
          class="bg-background border border-border rounded px-3 py-1 text-sm"
          @change="changeSoundMode">
          <option value="preloaded">预生成音效 (WAV)</option>
          <option value="generated">程序生成音效</option>
        </select>
      </div>

      <!-- 音量控制 -->
      <div>
        <label class="block text-sm font-medium text-foreground mb-2"> 音量: {{ Math.round(volume * 100) }}% </label>
        <input
          v-model.number="volume"
          type="range"
          min="0"
          max="1"
          step="0.1"
          class="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer slider"
          @input="updateVolume" />
      </div>

      <!-- 音效测试按钮 -->
      <div class="grid grid-cols-2 gap-3">
        <SecondaryButton :left-icon="'i-mdi-rocket-launch'" :disabled="isPlaying" @click="testStartup">
          启动音效
        </SecondaryButton>

        <SecondaryButton :left-icon="'i-mdi-check-circle'" :disabled="isPlaying" @click="testSuccess">
          成功音效
        </SecondaryButton>

        <SecondaryButton :left-icon="'i-mdi-alert-circle'" :disabled="isPlaying" @click="testError">
          失败音效
        </SecondaryButton>

        <SecondaryButton :left-icon="'i-mdi-bell'" :disabled="isPlaying" @click="testNotification">
          通知音效
        </SecondaryButton>
      </div>

      <!-- 状态显示 -->
      <div v-if="lastPlayed" class="text-xs text-muted-foreground"> 上次播放: {{ lastPlayed }} </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import audioService from '@/services/audioService';

const soundMode = ref<'preloaded' | 'generated'>('preloaded');
const volume = ref(0.3);
const isPlaying = ref(false);
const lastPlayed = ref('');

// 音效模式切换
const changeSoundMode = () => {
  const usePreloaded = soundMode.value === 'preloaded';
  audioService.setUsePreloadedSounds(usePreloaded);
  console.log('音效模式已切换:', soundMode.value);
};

// 音量更新
const updateVolume = () => {
  audioService.setVolume(volume.value);
};

// 播放音效的通用方法
const playSound = async (soundName: string, playFn: () => Promise<void>) => {
  if (isPlaying.value) return;

  isPlaying.value = true;
  lastPlayed.value = `${soundName} (${new Date().toLocaleTimeString()})`;

  try {
    await playFn();
  } catch (error) {
    console.error(`播放${soundName}失败:`, error);
  } finally {
    isPlaying.value = false;
  }
};

// 测试各种音效
const testStartup = () => playSound('启动音效', () => audioService.playStartup());
const testSuccess = () => playSound('成功音效', () => audioService.playSuccess());
const testError = () => playSound('失败音效', () => audioService.playError());
const testNotification = () => playSound('通知音效', () => audioService.playNotification());

// 初始化
onMounted(() => {
  volume.value = audioService.getVolume();
  soundMode.value = audioService.getUsePreloadedSounds() ? 'preloaded' : 'generated';
});
</script>

<style lang="scss" scoped>
.slider::-webkit-slider-thumb {
  @apply appearance-none w-4 h-4 bg-primary rounded-full cursor-pointer;
}

.slider::-moz-range-thumb {
  @apply w-4 h-4 bg-primary rounded-full cursor-pointer border-0;
}
</style>
